export default {
    data() {
        return {
            dialog: [{
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "我",
                    "img": "img/wechat-cover.jpg",
                    "me": true,
                    "des": "出来玩",
                },
                {
                    "name": "我",
                    "img": "img/wechat-cover.jpg",
                    "me": true,
                    "des": "出来玩出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球",
                },
                {
                    "name": "我",
                    "img": "img/wechat-cover.jpg",
                    "me": true,
                    "des": "出来玩",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球出来玩出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
                {
                    "name": "老王",
                    "img": "img/duanmofeng.jpg",
                    "me": false,
                    "des": "出来打篮球",
                },
            ]
        }
    },
    template: `
   <div class="dialogue">
        <div class="header">
            <div @click="back">
                 <img src="./img/arrow-left-bold.png" alt="">
            </div>
            <div class="header-title"><h3>{{$route.query.id}}</h3></div>
            <div class="header-icon">
                <img src="./img/elipsis.png" alt="">
            </div>
    </div>

    <div class="content">
        <div :class="{left:item.me==false,right:item.me==true}" v-for="item in dialog">
            <img :src="item.img" alt="">
            <span>{{item.des}}</span>
        </div>


    </div>




    <div class="footer">
        <div class="footer-item">
            <img src="./img/语音.png" alt="">
        </div>
        <div class="footer-item">
            <input type="text">
        </div>
        <div class="footer-item">
            <img src="./img/微信表情.png" alt="">
        </div>
        <div class="footer-item">
            <img src="./img/加.png" alt="">
        </div>

    </div>
   </div>
    `,
    methods: {
        back() {
            this.$router.back();
        }
    },

}